<template>
   <ex-dialog v-model="visible" draggable :title="form.name ? form.name : (form.id ? form.name : '新增')"
  width="700" contentHeight=480>
    <template #default>
      <el-form :model="form" :rules="button_rules" ref="dialogForm" label-width="100px" label-position="right">
      <el-tabs v-model="activeName" style="height: 100%">
        <el-tab-pane label="基本信息" name="base" style="height: 100%">
          <el-row>
            <el-col :span="12">
              <el-form-item label="方式名称" prop="name">
                <el-input v-model="form.name" clearable placeholder="处理方式名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="方式编码" prop="code">
              <el-input v-model="form.code" clearable placeholder="处理方式编码"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="依赖单据" prop="configId">
              <ex-cascader v-model="form.configId" dict-code="FamsDocumentConfig" placeholder="请选择依赖单据" :check-strictly="false" @change="configChange"></ex-cascader>
<!--              <el-cascader v-model="form.configId" :options="configOptions" :props="configProps"-->
<!--                           :show-all-levels="false" placeholder="请选择所属配置" clearable filterable  style="width: 100%" @change="configChange"></el-cascader>-->
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="处理流程" prop="flowId" style="width: 100%">
              <el-select v-model="form.flowId" placeholder="请选择处理流程" filterable clearable  style="width: 80%">
                <el-option v-if="processTemplates" v-for="item in processTemplates" :key="item.value" :label="item.label"
                           :value="item.value"/>
              </el-select>
              <el-icon size="large" @click="toAddProcessTemplates" style="margin-left: 5px;">
                <component is="el-icon-circle-plus"></component>
              </el-icon>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="单据卡片" prop="documentCardId">
              <ex-cascader v-model="form.documentCardId" dict-code="FamsAssetCard" placeholder="请选择单据卡片" :check-strictly="false"></ex-cascader>
<!--              <el-cascader v-model="form.documentCardId" :options="cardOptions" :props="cardProps"-->
<!--                           :show-all-levels="false" placeholder="请选择单据卡片" clearable filterable  style="width: 100%"></el-cascader>-->
            </el-form-item>
            </el-col>
            <el-col v-if="form.documentType==='in'||form.documentType==='permission'" :span="12">
				<el-form-item label="添加卡片" prop="addCardId">
				  <ex-cascader v-model="form.addCardId" dict-code="FamsAssetCard" placeholder="请选择明细添加卡片"  :check-strictly="false"></ex-cascader>
				</el-form-item>
            </el-col>
			  <el-col :span="12">
				  <el-form-item label="明细编辑卡片" prop="editCardId">
					  <ex-cascader v-model="form.editCardId" dict-code="FamsAssetCard" placeholder="请选择编辑卡片"  :check-strictly="false"></ex-cascader>
				  </el-form-item>
			  </el-col>
			  <el-col :span="12">
				  <el-form-item label="批量编辑卡片" prop="editsCardId">
					  <ex-cascader v-model="form.editsCardId" dict-code="FamsAssetCard" placeholder="请选择批量编辑卡片"  :check-strictly="false"></ex-cascader>
				  </el-form-item>
			  </el-col>
			  <el-col :span="12">
				  <el-form-item label="明细查看卡片" prop="showCardId">
					  <ex-cascader v-model="form.showCardId" dict-code="FamsAssetCard" placeholder="请选择明细查看卡片"  :check-strictly="false"></ex-cascader>
				  </el-form-item>
			  </el-col>
            <el-col :span="12">
              <el-form-item label="明细上限" prop="maxDetailCount">
                <el-input-number v-model="form.maxDetailCount" :min="1" :max="1000"
                                 placeholder="请输入单据可操作明细的数量" style="width: 100%" clearable></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通过资产" prop="passStatus">
                <ex-select v-model="form.passStatus" dict-code="ASSET_STATUS" placeholder="请选择通过资产状态"></ex-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="盘点中资产" prop="isIncludeCheckAsset">
                <el-switch
                    v-model="form.isIncludeCheckAsset"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    :active-value="'1'"
                    :inactive-value="'0'">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="80">
            <el-col :lg="24">
                <el-form-item label="超时期限(天)" prop="timeOutPeriod">
                  <el-input-number v-model="form.timeOutPeriod" :min="1" clearable placeholder="请输入超期限制天数"></el-input-number>
                </el-form-item>
                <el-form-item label="备注" prop="description">
                  <el-input v-model="form.description" clearable placeholder="备注"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="orderWeight">
                  <el-input v-model="form.orderWeight" clearable placeholder="排序"></el-input>
                </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
		  <el-tab-pane label="指定角色" name="SysRole" style="height: 100%">
			  <ex-rel-table ref="roleRelTable" size="small" :rel-entity="form" :treeApi="this.$API.system.role.treeData"
							default-expand-all>
          提示：默认所有角色可用，若勾选之后，则只有勾选角色可用
        </ex-rel-table>
		  </el-tab-pane>
      <el-tab-pane label="资产类别" name="AssetCategory" style="height: 100%">
        <ex-rel-table ref="categoryRelTable" size="small" :rel-entity="form"
                      :treeApi="this.$API.asset.assetcategory.treeData" default-expand-all>
          提示：默认可操作所有资产类别，若勾选之后，则只能操作勾选的类别的资产
        </ex-rel-table>
      </el-tab-pane>
        <el-tab-pane label="资产状态" name="AssetStatus" style="height: 100%">
          <ex-rel-table ref="roleRelTable" size="small" name="ASSET_STATUS" :rel-entity="form" :treeApi="this.$API.system.dic.treeData" node-key="code" :param="{dictCode:'ASSET_STATUS',dictType:'1'}" default-expand-all>
            提示：默认可操作所有资产状态，若勾选之后，则只能操作勾选状态的资产
          </ex-rel-table>
		</el-tab-pane>
        <el-tab-pane label="财务类型" name="financialTypes" style="height: 100%">
          <ex-rel-table ref="roleRelTable" size="small" name="FINANCIAL_TYPE" :rel-entity="form" :treeApi="this.$API.system.dic.treeData" node-key="code" :param="{dictCode:'FINANCIAL_TYPE',dictType:'1'}" default-expand-all>
            提示：默认可操作所有财务类型，若勾选之后，则只能操作勾选财务类型的资产
          </ex-rel-table>
        </el-tab-pane>
      </el-tabs>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto;text-align: center">
        <el-button plain type="primary" @click="save" :loading="loading">保 存</el-button>
        <el-button plain type="warning" @click="reset" :loading="loading">重 置</el-button>
        <el-button plain type="info" @click="this.visible = false" :loading="loading">关 闭</el-button>
      </div>
    </template>

  </ex-dialog>
</template>

<script>
import scIconSelect from '@/components/scIconSelect'
import ExRelTable from "@/components/exRelTable/index.vue";
import router from "@/router";
import tool from "@/utils/tool";
import ExSelect from "@/components/exSelect/index.vue";
import ExCascader from "@/components/exCascader/index.vue";
import ExCheckBox from "@/components/exCheckBox/index.vue";
import entity from "@/constant/model/entity";
import exDialog from '@/components/exDialog';
import BaseTemplate from "@/utils/baseTemplate";

export default {

  emits: ['success'],
  components: {
    ExCheckBox,
    ExCascader,
	  ExSelect,
    ExRelTable,
    scIconSelect,
    exDialog
  },
  props: {
    processtype: {
      type: Object, default: () => {
      }
    },
  },
  data() {
    return {
      activeName: 'base',
      visible: false,
      form: {
        id: "",
        code: "",
        name: "",
        parentLevelCode: "",
        isGroup: "",
        description: "",
        configId: ""
      },
      button_rules: {
        name: [
          {required: true, message: "请输入方式名称", trigger: "blur"},
        ],

      },
      loading: false,
      oldForm: null,
		processTemplates:null,
    }
  },
  watch: {},
  computed: {

  },
  async mounted() {

  },
  methods: {
    async initData() {
	  this.configChange();
    },
	  async configChange() {
		  let processTemplates = await this.$cache.dic.flows('ProcessTemplates', this.form.configId);
		  if (this.form.flowId) {
			  if (processTemplates.length === 0) {
				  this.form.flowId = null;
			  } else {
				  let bool = false;
				  processTemplates.forEach(item => {
					  if (item.value === this.form.flowId) {
						  bool = true;

					  }
				  });
				  if(!bool){
					  this.form.flowId = null;
				  }
			  }
		  }
		  this.processTemplates = processTemplates;

		  let documentConfig = await this.$cache.data.loadDocumentConfig(this.form.configId);
		  if(documentConfig){
			  this.form.documentType = documentConfig.type;
		  }
	  },
    relHandler(relMap) {
      if (!this.form.relMaps) {
        this.form.relMaps = {};
      }
      for (let key in relMap) {//清空旧的数据
        this.form.relMaps[key] = {};
      }
      //重新赋值新数据
      Object.assign(this.form.relMaps, relMap);
    },
    //显示
    open(entity) {
      this.form = Object.assign({}, entity);
      this.oldForm = Object.assign({}, this.form);
      this.visible = true;
      this.activeName = "base";
      this.initData();
    },
    reset() {
      this.form = Object.assign({}, this.oldForm);
		for(let ref in this.$refs){
			try {
				this.$refs[ref].refresh();
			}catch (e){
			}
		}
		this.configChange();
    },
    //保存
    async save() {
      let valid = await BaseTemplate.validate(this,this.$refs.dialogForm);
      if (valid) {
        try {
          this.loading = true
          var res;
          if (this.form.id) {
            res = await this.$API.asset.processType.edit.post(this.form)
          } else {
            res = await this.$API.asset.processType.add.post(this.form)
          }
          if (res.code === 2000) {
            this.$message.success(this.$t("code." + res.code));
            this.$emit('success');
            this.visible = false;
			this.$store.dispatch("commit",entity.FamsDocumentProcessType.name);
          } else {
            this.$message.warning(res.message)
          }
        } finally {
          this.loading = false
        }
      }
    },
    toAddProcessTemplates(){
      this.$router.push({name:'flowmanindex',params:{fromRouteId:tool.crypto.MD5(this.$route.path)}});
    },
  }
}
</script>

<style scoped>
h2 {
  font-size: 17px;
  color: #3c4a54;
  padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
  color: #fff;
}

</style>
